<!doctype html> 
<html lang="en" class="no-js"> 
<head> 
  <meta charset="utf-8"> 
 
  <!-- www.phpied.com/conditional-comments-block-downloads/ --> 
  <!--[if IE]><![endif]--> 
 
  <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame 
       Remove this if you use the .htaccess --> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
 
  <title> Spritebox - Create CSS from Sprite Images </title> 
  <meta name="description" content=""> 
  <meta name="author" content=""> 
<meta name="google-site-verification" content="w2B_syjC-FFj8-Wnt1C1kKIc96l-jZa4Ey3DwyQ0wd4" /> 
  <!-- Place favicon.ico and apple-touch-icon.png in the root of your domain and delete these references --> 
  <link rel="shortcut icon" href="http://gsinnott.kaen.org/spritebox/favicon.ico"> 
  <link rel="apple-touch-icon" href="/apple-touch-icon.png"> 
 
 
  <!-- CSS : implied media="all" --> 
  <link rel="stylesheet" href="style.css"> 
  <link rel="stylesheet" href="jquery/css/ui-lightness/jquery-ui-1.8.9.custom.css"> 
  <link rel="stylesheet" href="client.css">
 
        
  <script src="jquery/js/jquery-1.4.4.min.js"></script> 
  <script src="jquery/js/jquery-ui-1.8.9.custom.min.js"></script> 
  <script type="text/javascript" src="jquery.jigowatt.js"></script> 
  <script src="client.js"></script>
  <script src="common.js"></script> 
  <script type="text/javascript"> 
 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-20283371-1']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
 
 
</script> 
</head> 
 
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]--> 
<!--[if IE 7 ]>    <body class="ie7"> <![endif]--> 
<!--[if IE 8 ]>    <body class="ie8"> <![endif]--> 
<!--[if IE 9 ]>    <body class="ie9"> <![endif]--> 
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]--> 
 
<img style="position:absolute;top:-999px;left:-999px;" src="img/logo-large.png" alt="LOGO" /> 
  <div id="container"> 
      <div class="crosshair" id="cross-horz"></div> 
      <div class="crosshair" id="cross-vert"></div> 
      <div id="zoom"> 
          <span class="horz"></span> 
          <span class="vert"></span> 
          <span class="zoom-value"><span style="display:inline;">2</span>x</span> 
      </div> 
      <div id="ui-info"> 
 
        <a href="#" id="close-info" class="close"></a> 
        <ul> 
            <li><a href="#tabs-1">About</a></li> 
            <li><a href="#tabs-2">Getting Started</a></li> 
            <li><a href="#tabs-3">Feedback</a></li> 
        </ul> 
	<div id="tabs-1"> 
              <h2>Introduction</h2> 
              <p> 
                  Spritebox is a <strong>WYSIWYG tool</strong> to help web designers quickly and easily <strong>create CSS</strong> classes and IDs from a <strong>single sprite image</strong>. It is based on the principle of using the <strong>background-position</strong> property to align areas of a sprite image into block elements of a web page. It was made using a combination of JQuery, CSS3 and HTML5, and is totally <strong>free to use</strong>!
              </p> 
                <div class="break"></div> 
              <p>Spritebox works best in:</p> 
              <p> 
                  <img src="img/Firefox.png" width="50px" height="50px" alt="browser" /> 
                  <img src="img/Safari.png" width="50px" height="50px" alt="browser" /> 
                  <img src="img/Opera.png" width="50px" height="50px" alt="browser" /> 
                  <img src="img/Chrome.png" width="50px" height="50px" alt="browser" /> 
              </p> 
                <div class="break"></div> 
            <div id="update"> 
                <div class="up-header">Last Update <span>02/01/11</span></div> 
                <div class="clear"></div> 
                <p> 
                    Added preview panel for boxes, sprite image uploading, variable zoom with Shift & Z, and other tweaks suggested.
                </p> 
            </div> 
        </div> 
	<div id="tabs-2"> 
              <h2>Keyboard controls:</h2> 
 
              <p class="thekey"> 
                  <img src="img/ico-zoom.png" alt="zoom" /> Toggle Zoom &emsp;
                  <img src="img/ico-zoomlev.png" alt="zoom" /> Zoom Amount &emsp;
                  <br /> 
                  <img src="img/ico-chairs.png" alt="crosshairs" /> Toggle Crosshairs&emsp;
                  <br /> 
                  <img src="img/ico-shift.png" alt="shift" /> <span style="margin-top:10px;">Move&emsp;</span> 
                  <img src="img/ico-resize.png" style="vertical-align:bottom;" alt="shift" /> <span style="margin-top:10px;">Resize&emsp;</span> 
              </p> 
                <div class="clear"></div> 
                <div class="break"></div> 
              <h2>Quick start:</h2> 
              <ol> 
                  <li>To begin, you can either <strong>enter an URL</strong> of a hosted sprite image or <strong>click upload</strong> an image. You can also <strong>drag and drop</strong> to upload images into Spritebox.</li> 
                  <li><strong>Click and drag</strong> to create a block element on the desired portion of the sprite. Blocks are draggable and can be resized using the handles. Alternatively, use the <strong>arrow keys to nudge</strong> the block, or hold down <strong>Shift and use the arrow keys to resize</strong>.</li> 
                  <li>For extra accuracy, <strong>toggle the Z key</strong> to activate zooming and use <strong>Shift & Z</strong> to change the zoom amount. You can also <strong>toggle X</strong> to add crosshairs.</li> 
                  <li>Use the floating toolbox to <strong>rename your blocks as Classes or IDs</strong>, and change additional CSS properties.</li> 
                  <li>Rinse, repeat, then click <strong>Create CSS</strong>.</li> 
              </ol> 
                <div class="clear"></div> 
                <div class="break"></div> 
              <h2>Example sprites:</h2> 
              <p> 
                  <a href="http://b.static.ak.fbcdn.net/rsrc.php/z5/r/3_oEy-UyyDE.png" class="spritechange">Facebook</a> |
                  <a href="http://images.apple.com/global/nav/images/globalnavbg.png" class="spritechange">Apple Nav</a> |
                  <a href="http://s.ytimg.com/yt/img/master-vflb9nbea.png" class="spritechange">Youtube</a> |
                  <a href="http://www.google.ca/images/nav_logo3.png" class="spritechange">Google</a> |
                  <a href="http://img45.imageshack.us/img45/4259/buildingssheet7dv.png" class="spritechange">Pokemon!</a> 
              </p> 
              
    </div> 
              <div id="tabs-3"> 
                  <div id="contact"> 
 
                    <h2>Feedback</h2> 
                    <p>Please use this contact form to send any bugs, criticism or feature requests.</p> 
 
                    <div class="break"></div> 
 
                    <form method="post" action="contact.php" name="contactform" id="contactform"> 
 
                    <fieldset> 
                    <div class="clear"></div> 
 
                    <label for=name accesskey=U><span class="required">*</span> Name</label> 
                    <input name="name" type="text" id="name" value="" /> 
                    <div class="clear"></div> 
                    <br /> 
                    <label for=email accesskey=E><span class="required">*</span> Email</label> 
                    <input name="email" type="text" id="email" value="" /> 
                    <div class="clear"></div> 
 
 
                  
 
                    <br /> 
                    <label for=comments accesskey=C><span class="required">*</span> Comments</label> 
                    <textarea name="comments" cols="8" rows="3"  id="comments"></textarea> 
                    <div class="break"></div> 
 
                    <input type="submit" class="submit right" id="submit" value="Send" /> 
                    <label for=verify accesskey=V"><strong>3 + 1 =&nbsp;&nbsp;&nbsp;</strong></label> 
                    <input name="verify" type="text" id="verify" size="4" value="" style="width: 30px;float:none;" /><br /><br /> 
 
                    <div class="clear"></div> 
 
                    </fieldset> 
 
                    </form> 
 
                    <div id="message" class="right"></div> 
                    <br /> 
                    Alternatively, email <a href="gilbert.sinnott@gmail.com">gilbert.sinnott@gmail.com</a> 
 
                </div> 
              </div> 
      </div> 
 
    <div id="ui-panel"> 
            <h1></h1> 
        <div id="ui-panel-container"> 
        <div id="ui-header"> 
                <!--<div class="button right btn-val btn-func" id="move"><span></span></div>--> 
                <div class="button right btn-val btn-func" id="info"><span>?</span></div> 
                <div class="button right btn-val btn-func" id="prev-btn"><span><img src="img/ico-prev.png" alt="ico" /></span></div> 
        </div> 
        
            <div class="top-property"> 
                <input type="text" id="image-url" value="ie. http://yourwebsite.com/img/sprite.png" title="ie. http://yourwebsite.com/img/sprite.png" /> 
                <span style=" 
    font-family:Arial, sans-serif;font-weight:bold;font-size:0.8em;margin-top:2px;float:left;margin-right:6px;opacity:0.8;">Enter an URL or</span> 
                <div id="file-uploader"> 
                    <noscript> 
                        <p>Please enable JavaScript to use file uploader.</p>
                        <!-- or put a simple form for upload here -->
                    </noscript> 
                </div> 
 
                <!--<img src="" id="thumb" />
                <form id="newHotnessForm" action="upload/upload.php">
                        <label>Upload a Picture of Yourself</label>
                        <input type="file" id="imageUpload" name="uploaded" size="20" />
                        <button type="submit" class="button">Save</button>
                </form>--> 
 
 
            </div> 
                <div class="options disable"> 
                    <div id="options-disable"></div> 
                    <div class="naming"> 
                        <input type="text" id="boxname" title="Untitled" /> 
                        <div class="button btn-ico" id="type-class"><span>.</span></div> 
                        <div class="button btn-ico" id="type-id"><span>#</span></div> 
                    </div> 
                    <div class="clear"></div> 
                    <div class="break"></div> 
                        <div class="size"> 
                            <div class="half"> 
                                <strong>Width:</strong><input type="text" id="boxW"  class="val" /> 
                    <div class="clear"></div> 
                                <strong>Height:</strong><input type="text"  id="boxH" class="val"/> 
                            </div> 
                            <div class="half"> 
                                <strong>Pos X:</strong><input type="text"  id="boxX" class="val"/> 
                    <div class="clear"></div> 
                                <strong>Pos Y:</strong> <input type="text"  id="boxY" class="val"/> 
                            </div> 
 
                        </div> 
                    <div class="clear"></div> 
                    <div class="break"></div> 
                    <strong>Mass:</strong> 
                        <div class="mass right"> 
                            <div class="button btn-opt" id="mass1"><span>none</span></div> 
                            <div class="button btn-opt" id="mass2"><span>block</span></div> 
                            <div class="button btn-opt" id="mass3" style="margin-right:0px;"><span>inline-block</span></div> 
                        </div> 
                    <div class="clear"></div> 
                    <div class="break"></div> 
                    <strong>Repeat:</strong> 
                    <div class="repeat right"> 
                        <div class="button btn-opt" id="repeat1"><span>none</span></div> 
                        <div class="button btn-opt" id="repeat2"><span>x</span></div> 
                        <div class="button btn-opt" id="repeat3"><span>y</span></div> 
                        <div class="button btn-opt" id="repeat4" style="margin-right:0px;"><span>xy</span></div> 
                    </div> 
                    <div class="clear"></div> 
                    <!--<div class="break"></div>
                        <div class="tickboxes">
                            <div class="button btn-val opt-selected"><span></span></div> Include width and height
                                    <div class="clear"></div>
                                    <div class="button btn-val opt-selected"><span></span></div> Create single background-image<br />&emsp;&emsp; declaration for all classes
 
                        </div>--> 
                </div> 
 
                <div class="output"> 
                    <textarea cols="30" rows="4" class="right" id="output">Output appears here...</textarea> 
                    <div class="button btn-light left" id="makeOutput"><span>Create CSS</span></div> 
                    <div class="left" style="color:#555555;font-style:italic;font-size:0.85em;line-height:1.1em;font-family:Georgia;margin-top:3px;margin-left:4px;"><strong>Think that was cool?</strong> 
                        <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> 
                            <input type="hidden" name="cmd" value="_s-xclick"> 
                            <input type="hidden" name="hosted_button_id" value="KGS8LTDLUNX7S"> 
                            <input type="submit" id="donatesubmit" style="display:none;"> 
                            <label for="donatesubmit" style="font-weight:bold;color:#3d3d3d;">Be awesome, <span style="color:#c42a00;">Donate</span></label> 
                        </form> 
</div> 
                    <div class="clear"></div> 
                </div> 
        </div> 
 
 
    </div> 
 
 
      <div id="ui-preview"> 
 
        <a href="#" id="close-prev" class="close"></a> 
        <div class="clear"></div> 
        <div class="prev-header">Preview: <span>None selected</span></div> 
        <div id="ui-prev-wrap"> 
            <div id="preview"></div> 
        </div> 
        
      </div> 
 
    <div id="main"></div> 
    <div id="graph" class="dropme"></div> 
    <div id="contact-corner"><h1 style="margin:0;padding:0;"><a href="http://gsinnott.kaen.org">Gilbert Sinnott 2010</a></h1></div> 
  </div> <!--! end of #container --> 
</body> 
</html>